<template>
  <div v-if="show" class="diy-confirm-main">
    <div class="diy-confirm-bg" @click="closeFun('close')"/>
    <div class="diy-confirm-main">
      <i class="diy-confirm-close el-icon-close" @click="closeFun('close')"/>
      <div class="message-box__title"><div class="message-box__status del-icon"/><span/></div>
      <div class="diy-confirm-message">{{ message }}</div>
      <div class="message-box__btns">
        <button type="button" class="el-button el-button--default el-button--small el-button--primary handelok" @click="handelok">保存</button>
        <button type="button" class="el-button el-button--default el-button--small cancel" @click="closeFun('cancel')">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
  },
  data() {
    return {
      show: false,
      message: '',
      msgQueue: {}
    };
  },
  methods: {
    closeFun(action) {
      this.show = false;
      this.msgQueue.reject(action);
    },
    handelok() {
      this.show = false;
      this.msgQueue.resolve();
    },
    openConfirm(msg) {
      this.message = msg;
      this.show = true;
      return new Promise((resolve, reject) => {
        this.msgQueue = {
          resolve: resolve,
          reject: reject
        };
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.diy-confirm-main {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 3000;
  .diy-confirm-bg {
    z-index: 3001;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba($color: #000000, $alpha: 0.4);
  }
  .diy-confirm-main {
    width: 400px;
    height: 280px;
    border-radius: 12px !important;
    z-index: 3002;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -140px;
    background-color: #fff;
  }
  .diy-confirm-close  {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #999;
    font-size: 16px;
    cursor: pointer;
  }
  .message-box__title {
    margin-top: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    .del-icon {
      width: 88px;
      height: 88px;
      border-radius: 50%;
      background: url('../../assets/hint.png') center no-repeat;
      background-size: 100% auto;
    }
  }
  .diy-confirm-message {
    margin-top: 25px;
    font-size: 20px;
    color: #333;
    font-weight: 700;
    padding: 0 10px;
  }
  .message-box__btns {
    margin-top: 25px;
    .handelok {
      width: 120px;
      height: 40px;
      border-radius: 4px;
      font-size: 16px;
      font-weight: 500;
      color: white;
      margin: 0;
      line-height: 16px;
    }
    .cancel {
      width: 80px;
      height: 40px;
      border-radius: 4px;
      font-size: 16px;
      font-weight: 400;
      color: #406eff;
      line-height: 16px;
      margin-left: 10px;
      background: #EFF3FB;
      border: none;
    }
  }
}
</style>
